<template>
  <d2-container class="wl" style="margin-top: 20px !important">
    <div class="b-box-26">
      <div class="tit">
        <span> 物流清单 </span>
        <p></p>
      </div>

      <div class="boxnav">
        <div class="search">
          <div class="search-date">
            <el-date-picker
              v-model="logisticsListDate"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </div>

          <div class="search-type">
            <el-select
              v-model="logisticsTypeValue"
              :multiple="false"
              placeholder="请选择"
            >
              <el-option
                v-for="item in logisticsType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>

          <div class="search-btn">
            <el-button type="primary" icon="el-icon-search" @click="search_before"
              >搜索</el-button
            >
          </div>

          <div class="search-down">
            <el-button
              type="primary"
              icon="el-icon-download"
              @click="downloadDialogVisible = true"
              >下载</el-button
            >
          </div>
        </div>
        <div class="logistics-list-table">
          <div class="logistics-list-table-header">
            <div class="logistics-list-table-th" style="width: 6%">
              <input type="checkbox" v-model="allLogisticsListCheck" />
            </div>
            <div class="logistics-list-table-th" style="width: 18%">运单号</div>
            <div class="logistics-list-table-th" style="width: 18%">客户单号</div>
            <div class="logistics-list-table-th" style="width: 43%">目的地/当前位置</div>
            <div class="logistics-list-table-th" style="width: 15%">当前温度</div>
          </div>
          <div class="table-row" style="height: 567px">
            <div
              class="logistics-list-table-body"
              v-for="(item, index) in logisticsList"
              :key="item.id"
            >
              <div class="logistics-list-table-td" style="width: 6%">
                <input type="checkbox" v-model="item.isChecked" :vaule="item.ydh" />
              </div>
              <div class="logistics-list-table-td" style="width: 18%">
                <div v-if="item.wlstatsimp == '已签收'" style="color: rgb(35, 142, 35)">
                  {{ item.ydh }}
                </div>
                <div v-if="item.wlstatsimp == '待签收'" style="color: rgb(255, 127, 0)">
                  {{ item.ydh }}
                </div>
                <div v-if="item.wlstatsimp == '待配送'" style="color: rgb(216, 216, 191)">
                  {{ item.ydh }}
                </div>
                <div v-if="item.wlstatsimp == '运输中'" style="color: rgb(112, 147, 219)">
                  {{ item.ydh }}
                </div>
              </div>
              <div class="logistics-list-table-td" style="width: 18%">
                {{ item.cuswbno }}
              </div>
              <div
                class="logistics-list-table-td"
                style="width: 43%; cursor: pointer"
                @click="click_info(item)"
              >
                {{ item.mddpro }}-{{ item.mddcit }}-{{ item.shdw }}/{{ item.wlpos }}
              </div>
              <div class="logistics-list-table-td" style="width: 15%">
                {{ item.sswdtxt }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="b-box"
      :style="{
        width: baidu_map_width + '%',
        opacity: '0.7',
        transition: 'width ' + baidu_map_width_transition,
        'transition-delay': baidu_map_width_delay,
        '-webkit-transition-delay': baidu_map_width_delay,
      }"
    >
      <baidu-map
        class="bm-view"
        :zoom="zoom"
        :center="center"
        @ready="mapHandler"
        inertial-dragging
        :scroll-wheel-zoom="true"
      >
        <bm-marker
          v-for="(item, index) in bills_mark"
          :key="index"
          :position="{ lng: item.wljwd.lng, lat: item.wljwd.lat }"
          :dragging="false"
          @click="lookDetail(index)"
          :icon="{ url: mark_url, size: { width: 60, height: 65 } }"
        >
          <bm-info-window
            :title="'运单号:' + item.ydh"
            :position="{ lng: item.wljwd.lng, lat: item.wljwd.lat }"
            :offset="{ width: -20, height: -32 }"
            :show="bills_mark[index].showFlag"
            @close="infoWindowClose(index)"
            @open="infoWindowOpen(index)"
          >
            <p>经度: {{ item.wljwd.lng }}</p>
            <p>维度:{{ item.wljwd.lat }}</p>
            <p>当前位置:{{ item.wlpos }}</p>
            <p>当前温度:{{ item.sswdtxt }}</p>
          </bm-info-window>
        </bm-marker>
        <template v-if="polyline.length > 0" v-for="path in polyline">
          <new-polyline
            :path="path"
            stroke-color="#0091ea"
            :stroke-opacity="1"
            :stroke-weight="6"
            :editing="false"
            :zIndex="1"
          ></new-polyline>
        </template>

        <bm-marker
          v-if="polyline.length > 0"
          key="start"
          :position="{ lng: startPolyline.lng, lat: startPolyline.lat }"
          :dragging="false"
          :icon="{ url: start_mark_url, size: { width: 32, height: 32 } }"
        >
        </bm-marker>
        <bm-marker
          v-if="polyline.length > 0"
          key="end"
          :position="{ lng: endPolyline.lng, lat: endPolyline.lat }"
          :dragging="false"
          :icon="{ url: end_mark_url, size: { width: 32, height: 32 } }"
        >
        </bm-marker>
        <template v-for="path in polyline_warn">
          <new-polyline
            :path="path"
            stroke-color="red"
            :stroke-opacity="1"
            :stroke-weight="6"
            :editing="false"
            :zIndex="999"
          ></new-polyline>
        </template>
      </baidu-map>
    </div>

    <transition name="el-zoom-in-center">
      <div v-show="right_show">
        <div class="b-box" style="width: 26%">
          <div class="tit">
            <span> 总计运单数 </span>
            <p></p>
          </div>
          <div class="yqlist">
            <div class="total_num">
              <p>{{ index_data.total_bills }}</p>
              <span>单</span>
            </div>
          </div>
        </div>

        <div class="b-box" style="width: 26%">
          <div class="tit">
            <span> 基本总数 </span>
            <p></p>
          </div>
          <div class="yqlist">
            <ul class="clearfix">
              <li>
                <div class="yq" style="color: #238e23" id="yq">
                  {{ index_data.done_sign }}
                </div>
                <span style="color: #238e23">已签收</span>
              </li>
              <li>
                <div class="yq" style="color: #ff7f00">{{ index_data.tobe_sign }}</div>
                <span style="color: #ff7f00">待签收</span>
              </li>
              <li>
                <div class="yq" style="color: #d8d8bf">{{ index_data.tobe_bills }}</div>
                <span style="color: #d8d8bf">待配送</span>
              </li>
              <li>
                <div class="yq" style="color: #7093db">{{ index_data.in_bills }}</div>
                <span style="color: #7093db">运输中</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="b-box" style="width: 26%">
          <div class="tit">
            <span> 预警事件 </span>
            <p></p>
          </div>
          <div class="boxnav" style="height: 252px">
            <div class="logistics-list-table">
              <div class="logistics-list-table-header">
                <div class="logistics-list-table-th" style="width: 18%">事件</div>
                <div class="logistics-list-table-th" style="width: 32%">预警时间</div>
                <div class="logistics-list-table-th" style="width: 32%">运单号</div>
                <div class="logistics-list-table-th" style="width: 18%">物流设备</div>
              </div>
              <div class="table-row" style="height: 330px">
                <div
                  class="logistics-list-table-body"
                  v-for="(item, index) in warnList"
                  :key="item.id"
                >
                  <div
                    class="logistics-list-table-body"
                    style="background-color: #cfb53b; cursor: pointer"
                    v-if="item.isalert == '预警'"
                    @click="click_info(item)"
                  >
                    <div class="logistics-list-table-td" style="width: 18%">
                      {{ item.isalert }}
                    </div>
                    <div class="logistics-list-table-td" style="width: 32%">
                      {{ item.sswdsj }}
                    </div>
                    <div class="logistics-list-table-td" style="width: 32%">
                      {{ item.ydh }}
                    </div>
                    <div class="logistics-list-table-td" style="width: 18%">
                      {{ item.wlzzmc }}
                    </div>
                  </div>
                  <div
                    class="logistics-list-table-body"
                    style="background-color: red; cursor: pointer"
                    v-if="item.isalert == '报警'"
                    @click="click_info(item)"
                  >
                    <div class="logistics-list-table-td" style="width: 18%">
                      {{ item.isalert }}
                    </div>
                    <div class="logistics-list-table-td" style="width: 32%">
                      {{ item.sswdsj }}
                    </div>
                    <div class="logistics-list-table-td" style="width: 32%">
                      {{ item.ydh }}
                    </div>
                    <div class="logistics-list-table-td" style="width: 18%">
                      {{ item.wlzzmc }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <div class="b-box" style="width: 100%; margin-top: 15px">
      <div class="tit">
        <span> 温度报告 </span>
        <p></p>
      </div>
      <el-tabs tab-position="left" v-model="activeChart" v-show="markerYdhTab" style="height: 310px;">
        <el-tab-pane label="通用信息" name="common">
        <div class="boxnav-min" style="height: 310px;">
				<ul class="jcjg">
					<li><h3>运单信息</h3>
            <div class="logistics-list-table">
              <div class="table-row" style="height: 265px">
                <div class="logistics-list-table-body">
                    <div class="logistics-list-table-td" style="width: 18%;text-align: right;">
                      客户单号：
                    </div>
                    <div class="logistics-list-table-td" style="width: 32%;text-align: left;">
                      {{ billInfo.slwbr_cuswbno }}
                    </div>
                    <div class="logistics-list-table-td" style="width: 18%;text-align: right;">
                      松冷运单号：
                    </div>
                    <div class="logistics-list-table-td" style="width: 32%;text-align: left;">
                      {{ billInfo.slwbr_ydh }}
                    </div>
                </div>

                <div class="logistics-list-table-body">
                    <div class="logistics-list-table-td" style="width: 18%;text-align: right;">
                      提货时间：
                    </div>
                    <div class="logistics-list-table-td" style="width: 32%;text-align: left;">
                      {{ billInfo.slwbr_thsj }}
                    </div>
                    <div class="logistics-list-table-td" style="width: 18%;text-align: right;">
                      签收时间：
                    </div>
                    <div class="logistics-list-table-td" style="width: 32%;text-align: left;">
                      {{ billInfo.slwbr_qssj }}
                    </div>
                </div>

                <div class="logistics-list-table-body">
                    <div class="logistics-list-table-td" style="width: 18%;text-align: right;">
                      收货人：
                    </div>
                    <div class="logistics-list-table-td" style="width: 32%;text-align: left;">
                      {{ billInfo.slwbr_shr }}
                    </div>
                    <div class="logistics-list-table-td" style="width: 18%;text-align: right;">
                      收货电话：
                    </div>
                    <div class="logistics-list-table-td" style="width: 32%;text-align: left;">
                      {{ billInfo.slwbr_shrdh }}
                    </div>
                </div>

                <div class="logistics-list-table-body">
                    <div class="logistics-list-table-td" style="width: 18%;text-align: right;">
                      发货单位：
                    </div>
                    <div class="logistics-list-table-td" style="width: 82%;text-align: left;">
                      {{ billInfo.slwbr_fhdw }}
                    </div>
                </div>

                <div class="logistics-list-table-body">
                    <div class="logistics-list-table-td" style="width: 18%;text-align: right;">
                      收货单位：
                    </div>
                    <div class="logistics-list-table-td" style="width: 82%;text-align: left;">
                      {{ billInfo.slwbr_shdw }}
                    </div>
                </div>

                <div class="logistics-list-table-body">
                    <div class="logistics-list-table-td" style="width: 18%;text-align: right;">
                      收货地址：
                    </div>
                    <div class="logistics-list-table-td" style="width: 82%;text-align: left;">
                      {{ billInfo.slwbr_dhdz }}
                    </div>
                </div>

                <div class="logistics-list-table-body">
                    <div class="logistics-list-table-td" style="width: 18%;text-align: right;">
                      温度要求：
                    </div>
                    <div class="logistics-list-table-td" style="width: 82%;text-align: left;">
                      {{ billInfo.slwbr_wdyq }}
                    </div>
                </div>
              </div>
            </div>
					</li>

					<li><h3>货物信息</h3>
            <div class="logistics-list-table">
              <div class="table-row" style="height: 310px">
            <div class="logistics-list-table">
              <div class="logistics-list-table-header">
                <div class="logistics-list-table-th" style="width: 18%">NO.</div>
                <div class="logistics-list-table-th" style="width: 50%">承运货物</div>
                <div class="logistics-list-table-th" style="width: 32%">件数</div>
              </div>
              <div class="table-row" style="height: 209px">
                <div
                  class="logistics-list-table-body"
                  v-for="(item, index) in carryinGoodsList"
                  :key="item.id"
                >
                  <div
                    class="logistics-list-table-body"
                  >
                    <div class="logistics-list-table-td" style="width: 18%">
                      {{ index+1 }}
                    </div>
                    <div class="logistics-list-table-td" style="width: 50%">
                      {{ item.name }}
                    </div>
                    <div class="logistics-list-table-td" style="width: 32%">
                      {{ item.num }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
              </div>
            </div>
					</li>


          <li><h3>签收照片</h3>
            <div class="logistics-list-table">
              <div class="table-row" style="height: 310px">
            <div class="logistics-list-table">
              <el-image 
                style="width: 95%; height: 100%"
                :src="signPhoto" 
                :preview-src-list="signPhotoList">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
              </div>
            </div>
					</li>


          <li><h3>实时数据</h3>
            <div class="logistics-list-table">
              <div class="table-row" style="height: 265px">
                <div class="logistics-list-table-body">
                    <div class="logistics-list-table-td" style="width: 18%;text-align: right;">
                      温度时间：
                    </div>
                    <div class="logistics-list-table-td" style="width: 32%;text-align: left;">
                      {{ billCurData.sswdsj }}
                    </div>
                    <div class="logistics-list-table-td" style="width: 18%;text-align: right;">
                      温度数据：
                    </div>
                    <div class="logistics-list-table-td" style="width: 32%;text-align: left;">
                      {{ billCurData.sswdtxt }}
                    </div>
                </div>

                <div class="logistics-list-table-body">
                    <div class="logistics-list-table-td" style="width: 18%;text-align: right;">
                      当前位置：
                    </div>
                    <div class="logistics-list-table-td" style="width: 82%;text-align: left;">
                      {{ billCurData.wlpos }}
                    </div>
                </div>

                <div class="logistics-list-table-body">
                    <div class="logistics-list-table-td" style="width: 18%;text-align: right;">
                      路由信息：
                    </div>
                    <div class="logistics-list-table-td" style="width: 82%;text-align: left;height:auto">
                      <el-timeline>
                        <el-timeline-item
                          v-for="(activity, index) in billCurData.route_info"
                          :key="index"
                          :color="activity.color"
                          placement="top"
                          :timestamp="activity.title">
                          {{activity.desc}}
                        </el-timeline-item>
                      </el-timeline>
                    </div>
                </div>

              </div>
            </div>
					</li>
			</ul>
	
			</div>
        </el-tab-pane>

        <el-tab-pane label="保温箱温度" name="rt"><div id="temp_line_b" style="width:100%;height:300px"></div></el-tab-pane>
        <el-tab-pane label="冷藏车温度" name="rb"><div id="temp_line" style="width:100%;height:300px"></div></el-tab-pane>
        
      </el-tabs>
      

      
    </div>

    <el-dialog
      title="选择需要下载的内容"
      width="600px"
      :visible.sync="downloadDialogVisible"
      :append-to-body="true"
    >
      <div style="margin-top: 5px">
        <el-checkbox-group v-model="downloadChecked" size="small">
          <el-checkbox label="1" border>现场签收照片</el-checkbox>
          <el-checkbox label="2" border>高拍照片</el-checkbox>
          <el-checkbox label="3" border>全程温度</el-checkbox>
        </el-checkbox-group>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="downloadDialogVisible = false">取 消</el-button>
        <el-button type="success" @click="downloadSubmit">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="温度预警"
      :visible.sync="dialogVisibleWarm"
      custom-class="warm_style"
      width="600px"
    >
      <div
        v-for="(item, index) in warnList"
        style="border: 1px solid #ccc; padding: 5px 10px; margin-bottom: 10px"
      >
        <p>
          事件名称：
          <span
            v-if="item['isalert'] == '预警'"
            style="background: #cfb53b; padding: 2px 5px; color: #fff"
            >{{ item["isalert"] }}</span
          >
          <span
            v-if="item['isalert'] == '报警'"
            style="background: red; padding: 2px 5px; color: #fff"
            >{{ item["isalert"] }}</span
          >
        </p>
        <p>预警时间：{{ item["sswdsj"] }}</p>
        <p v-if="item['transmode'] == 1">运输模式：<span style="background: #44cef6; padding: 2px 5px; color: #fff;border-radius:10px">冷藏车(常规)</span></p>
        <p v-if="item['transmode'] == 2">运输模式：<span style="background: #bddd22; padding: 2px 5px; color: #fff;border-radius:10px">保温箱</span></p>
        <p v-if="item['transmode'] == 2">温度记录仪编号：{{ item['wdjlybh'] }}</p>
        <p>
          预警设备：<span style="font-size: 18px; font-weight: bold">{{
            item["wlzzmc"]
          }}</span>
        </p>
        <p>当前温度：{{ item["sswdtxt"] }}°C</p>
        <p>温度要求：{{ item["wdmin"] }}-{{ item["wdmax"] }}°C</p>
        <p>
          关联运单号：<span style="font-size: 18px; font-weight: bold">{{
            item["ydh"]
          }}</span>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="dialogVisibleWarm = false">确 定</el-button>
      </span>
    </el-dialog>
  </d2-container>
</template>

<script>
import draggable from "vuedraggable";
import VueGridLayout from "vue-grid-layout";
import initData from "./init.js";
import newPolyline from "@/components/new-polyline/newPolyline";
import { Loading } from "element-ui";
import elementResizeDetectorMaker from 'element-resize-detector'

import { request } from "@/api/service";

export default {
  name: "indexComponent",
  components: {
    draggable,
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    newPolyline,
    Loading,
  },
  data() {
    const endDate = new Date();
    const startDate = new Date();
    startDate.setTime(startDate.getTime() - 3600 * 1000 * 24 * 6); // 设置为最近7天
    return {
      defaultLayout: initData,
      layout: [],
      colNum: 48,
      pxData: {},
      downloadDialogVisible: false,
      downloadChecked: [],
      logisticsListDate: [this.formatDate(startDate), this.formatDate(endDate)],
      logisticsList: [],
      warnList: [],
      logisticsType: [
        {
          value: 0,
          label: "全部",
        },
        {
          value: 1,
          label: "已签收",
        },
        {
          value: 2,
          label: "待签收",
        },
        {
          value: 3,
          label: "待配送",
        },
        {
          value: 4,
          label: "运输中",
        },
        {
          value: 5,
          label: "未签收",
        },
      ],
      logisticsTypeValue: 5,
      map: "",
      zoom: 0,
      center: "",
      mapStyle: {
        styleJson: [
          {
            featureType: "estatelabel",
            elementType: "labels.text.fill",
            stylers: {
              color: "#8d694eff",
            },
          },
          {
            featureType: "restaurantlabel",
            elementType: "labels",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "restaurantlabel",
            elementType: "labels.icon",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "lifeservicelabel",
            elementType: "labels",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "lifeservicelabel",
            elementType: "labels.icon",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "transportationlabel",
            elementType: "labels.icon",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "transportationlabel",
            elementType: "labels",
            stylers: {
              visibility: "on",
            },
          },
          {
            featureType: "financelabel",
            elementType: "labels.icon",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "financelabel",
            elementType: "labels",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "land",
            elementType: "geometry",
            stylers: {
              color: "#ffffffff",
            },
          },
          {
            featureType: "building",
            elementType: "geometry.topfill",
            stylers: {
              color: "#e7dfd6ff",
            },
          },
          {
            featureType: "building",
            elementType: "geometry.sidefill",
            stylers: {
              color: "#f4ebe2ff",
            },
          },
          {
            featureType: "building",
            elementType: "geometry.stroke",
            stylers: {
              color: "#b9a797ff",
            },
          },
          {
            featureType: "estatelabel",
            elementType: "labels.text.stroke",
            stylers: {
              color: "#ebe1d8ff",
            },
          },
          {
            featureType: "estatelabel",
            elementType: "labels.icon",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "estatelabel",
            elementType: "labels.text",
            stylers: {
              fontsize: 28,
            },
          },
          {
            featureType: "manmade",
            elementType: "labels.text.fill",
            stylers: {
              color: "#72533aff",
            },
          },
          {
            featureType: "manmade",
            elementType: "geometry",
            stylers: {
              color: "#ecececff",
            },
          },
          {
            featureType: "manmade",
            elementType: "labels.text",
            stylers: {
              fontsize: 36,
            },
          },
          {
            featureType: "manmade",
            elementType: "labels.text.stroke",
            stylers: {
              color: "#b6997fff",
            },
          },
          {
            featureType: "green",
            elementType: "geometry",
            stylers: {
              color: "#ecececff",
            },
          },
          {
            featureType: "education",
            elementType: "geometry",
            stylers: {
              color: "#ecececff",
            },
          },
          {
            featureType: "medical",
            elementType: "geometry",
            stylers: {
              color: "#ecececff",
            },
          },
          {
            featureType: "scenicspots",
            elementType: "geometry",
            stylers: {
              color: "#ecececff",
            },
          },
          {
            featureType: "entertainment",
            elementType: "geometry",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "estate",
            elementType: "geometry",
            stylers: {
              color: "#ecececff",
            },
          },
          {
            featureType: "shopping",
            elementType: "geometry",
            stylers: {
              color: "#ecececff",
              visibility: "on",
            },
          },
          {
            featureType: "transportation",
            elementType: "geometry",
            stylers: {
              color: "#ecececff",
            },
          },
          {
            featureType: "transportation",
            elementType: "labels.text.fill",
            stylers: {
              color: "#72533aff",
            },
          },
          {
            featureType: "transportation",
            elementType: "labels.text.stroke",
            stylers: {
              color: "#b6997fff",
            },
          },
          {
            featureType: "transportation",
            elementType: "labels.text",
            stylers: {
              fontsize: 36,
            },
          },
          {
            featureType: "medical",
            elementType: "labels.text.fill",
            stylers: {
              color: "#72533aff",
            },
          },
          {
            featureType: "medical",
            elementType: "labels.text.stroke",
            stylers: {
              color: "#b6997fff",
            },
          },
          {
            featureType: "medical",
            elementType: "labels.text",
            stylers: {
              fontsize: 36,
            },
          },
          {
            featureType: "education",
            elementType: "labels.text.fill",
            stylers: {
              color: "#72533aff",
            },
          },
          {
            featureType: "education",
            elementType: "labels.text.stroke",
            stylers: {
              color: "#b6997fff",
            },
          },
          {
            featureType: "education",
            elementType: "labels.text",
            stylers: {
              fontsize: 36,
            },
          },
          {
            featureType: "carservicelabel",
            elementType: "labels",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "carservicelabel",
            elementType: "labels.icon",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "shoppinglabel",
            elementType: "labels.icon",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "hotellabel",
            elementType: "labels.icon",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "governmentlabel",
            elementType: "labels.icon",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "companylabel",
            elementType: "labels.icon",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "businesstowerlabel",
            elementType: "labels.icon",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "entertainmentlabel",
            elementType: "labels",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "entertainmentlabel",
            elementType: "labels.icon",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "medicallabel",
            elementType: "labels.icon",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "educationlabel",
            elementType: "labels.icon",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "scenicspotslabel",
            elementType: "labels.icon",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "airportlabel",
            elementType: "labels.icon",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "airportlabel",
            elementType: "labels.text",
            stylers: {
              fontsize: 36,
            },
          },
          {
            featureType: "airportlabel",
            elementType: "labels.text.fill",
            stylers: {
              color: "#72533aff",
            },
          },
          {
            featureType: "airportlabel",
            elementType: "labels.text.stroke",
            stylers: {
              color: "#b6997fff",
            },
          },
          {
            featureType: "scenicspotslabel",
            elementType: "labels.text",
            stylers: {
              fontsize: 28,
            },
          },
          {
            featureType: "scenicspotslabel",
            elementType: "labels.text.fill",
            stylers: {
              color: "#4a4a4aff",
            },
          },
          {
            featureType: "scenicspotslabel",
            elementType: "labels.text.stroke",
            stylers: {
              color: "#ffffffff",
            },
          },
          {
            featureType: "educationlabel",
            elementType: "labels.text.fill",
            stylers: {
              color: "#8d694eff",
            },
          },
          {
            featureType: "educationlabel",
            elementType: "labels.text.stroke",
            stylers: {
              color: "#ebe1d8ff",
            },
          },
          {
            featureType: "educationlabel",
            elementType: "labels.text",
            stylers: {
              fontsize: 26,
            },
          },
          {
            featureType: "medicallabel",
            elementType: "labels.text.fill",
            stylers: {
              color: "#8d694eff",
            },
          },
          {
            featureType: "medicallabel",
            elementType: "labels.text.stroke",
            stylers: {
              color: "#ebe1d8ff",
            },
          },
          {
            featureType: "medicallabel",
            elementType: "labels.text",
            stylers: {
              fontsize: 24,
            },
          },
          {
            featureType: "businesstowerlabel",
            elementType: "labels.text.stroke",
            stylers: {
              color: "#ebe1d8ff",
            },
          },
          {
            featureType: "businesstowerlabel",
            elementType: "labels.text.fill",
            stylers: {
              color: "#8d694eff",
            },
          },
          {
            featureType: "businesstowerlabel",
            elementType: "labels.text",
            stylers: {
              fontsize: 24,
            },
          },
          {
            featureType: "companylabel",
            elementType: "labels",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "hotellabel",
            elementType: "labels.text.fill",
            stylers: {
              color: "#8d694eff",
            },
          },
          {
            featureType: "hotellabel",
            elementType: "labels.text.stroke",
            stylers: {
              color: "#ebe1d8ff",
            },
          },
          {
            featureType: "hotellabel",
            elementType: "labels.text",
            stylers: {
              fontsize: 24,
            },
          },
          {
            featureType: "shoppinglabel",
            elementType: "labels.text.fill",
            stylers: {
              color: "#8d694eff",
            },
          },
          {
            featureType: "shoppinglabel",
            elementType: "labels.text.stroke",
            stylers: {
              color: "#ebe1d8ff",
            },
          },
          {
            featureType: "transportationlabel",
            elementType: "labels.text.fill",
            stylers: {
              color: "#4a4a4aff",
            },
          },
          {
            featureType: "transportationlabel",
            elementType: "labels.text",
            stylers: {
              fontsize: 24,
            },
          },
          {
            featureType: "scenicspots",
            elementType: "labels.text.fill",
            stylers: {
              color: "#72533aff",
            },
          },
          {
            featureType: "scenicspots",
            elementType: "labels.text.stroke",
            stylers: {
              color: "#b6997fff",
            },
          },
          {
            featureType: "scenicspots",
            elementType: "labels.text",
            stylers: {
              fontsize: 36,
            },
          },
          {
            featureType: "governmentlabel",
            elementType: "labels.text.fill",
            stylers: {
              color: "#4a4a4aff",
            },
          },
          {
            featureType: "scenicspotslabel",
            elementType: "labels",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "district",
            elementType: "labels.text.fill",
            stylers: {
              color: "#ffffffff",
            },
          },
          {
            featureType: "district",
            elementType: "labels.text.stroke",
            stylers: {
              color: "#72533aff",
              weight: 3.5,
            },
          },
          {
            featureType: "town",
            elementType: "labels.text.stroke",
            stylers: {
              color: "#72533aff",
              weight: 3,
            },
          },
          {
            featureType: "town",
            elementType: "labels.text.fill",
            stylers: {
              color: "#ffffffff",
            },
          },
          {
            featureType: "village",
            elementType: "labels.text.stroke",
            stylers: {
              color: "#ffffffff",
              weight: 2.5,
            },
          },
          {
            featureType: "village",
            elementType: "labels.text.fill",
            stylers: {
              color: "#72533aff",
              weight: 40,
            },
          },
          {
            featureType: "village",
            elementType: "labels.text",
            stylers: {
              fontsize: 20,
            },
          },
          {
            featureType: "highway",
            elementType: "geometry.fill",
            stylers: {
              color: "#fdf0daff",
            },
          },
          {
            featureType: "highway",
            elementType: "geometry.stroke",
            stylers: {
              color: "#ffd993ff",
            },
          },
          {
            featureType: "highway",
            elementType: "labels.text.fill",
            stylers: {
              color: "#000000ff",
            },
          },
          {
            featureType: "highway",
            elementType: "labels.text.stroke",
            stylers: {
              color: "#ffffffff",
            },
          },
          {
            featureType: "nationalway",
            elementType: "geometry.fill",
            stylers: {
              color: "#fdf0daff",
            },
          },
          {
            featureType: "nationalway",
            elementType: "geometry.stroke",
            stylers: {
              color: "#ffd993ff",
            },
          },
          {
            featureType: "nationalway",
            elementType: "labels.text.fill",
            stylers: {
              color: "#000000ff",
            },
          },
          {
            featureType: "nationalway",
            elementType: "labels.text.stroke",
            stylers: {
              color: "#ffffffff",
            },
          },
          {
            featureType: "provincialway",
            elementType: "geometry.stroke",
            stylers: {
              color: "#ffd993ff",
            },
          },
          {
            featureType: "provincialway",
            elementType: "geometry.fill",
            stylers: {
              color: "#fdf0daff",
            },
          },
          {
            featureType: "provincialway",
            elementType: "labels.text.fill",
            stylers: {
              color: "#000000ff",
            },
          },
          {
            featureType: "provincialway",
            elementType: "labels.text.stroke",
            stylers: {
              color: "#ffffffff",
            },
          },
          {
            featureType: "subway",
            elementType: "geometry.fill",
            stylers: {
              color: "#f5a117ff",
            },
          },
          {
            featureType: "manmade",
            elementType: "labels",
            stylers: {
              visibility: "on",
            },
          },
        ],
      },
      bills_mark: [],
      marks: [],
      mark_url: this.$baseUrl + "image/s_ico4.png",
      start_mark_url: this.$baseUrl + "image/carStop.png",
      end_mark_url: this.$baseUrl + "image/carStart.png",
      polyline: [],
      polyline_warn: [],
      startPolyline: {},
      endPolyline: {},
      icons: [],
      temp_line: null,
      temp_line_b: null,
      drawLineData: [],
      drawLineDataB: [],
      wdmin: 0,
      wdmax: 0,
      markerYdh: "",
      index_data: {
        total_bills: 0,
        tobe_bills: 0,
        tobe_sign: 0,
        done_sign: 0,
        in_bills: 0,
      },
      fullscreenLoading: false,
      right_show: true,
      baidu_map_width: "48",
      baidu_map_width_delay: ".5s",
      baidu_map_width_transition: ".5s",
      dialogVisibleWarm: false,
      soundurl: this.$baseUrl + "video/alert.mp3",
      warn_audio: "",
      activeChart: "common",
      markerYdhTab: false,
      billInfo:{
        slwbr_cuswbno:"",
        slwbr_ydh:"",
        slwbr_fhdw:"",
        slwbr_shdw:"",
        slwbr_dhdz:"",
        slwbr_shr:"",
        slwbr_shrdh:"",
        slwbr_wdyq:"",
        slwbr_thsj:"",
        slwbr_qssj:""
      },
      carryinGoodsList: [],
      signPhoto:'',
      signPhotoList:[],
      billCurData:{
        sswdsj:"",
        sswdtxt:"",
        wlpos:"",
        route_info:[]
      }
    };
  },
  async created() {
    this.layout = await this.$store.dispatch(
      "d2admin/db/get",
      {
        dbName: "sys",
        path: "grid-layout",
        defaultValue: JSON.parse(JSON.stringify(this.defaultLayout)),
        user: true,
      },
      { root: true }
    );
  },
  mounted() {
    this.$emit("on-mounted");
    this.search_logistics();

    // this.warn_audio = new Audio(this.soundurl);

    var chartA = document.getElementById("temp_line")
    var chartB = document.getElementById("temp_line_b")
    var that = this
    this.temp_line = this.$echarts.init(chartA);
    this.temp_line_b = this.$echarts.init(chartB);
    
    var elementResize_f = elementResizeDetectorMaker({
      strategy: 'scroll', 
      callOnAdd: true
    })
    elementResize_f.listenTo(chartA, function(element) {
      that.temp_line.resize() 
    });
    elementResize_f.listenTo(chartB, function(element) {
      that.temp_line_b.resize() 
    });

    // this.drawLine()

    this.intervalId = setInterval(() => {
      this.search_logistics();

      if (this.markerYdh) {
        this.click_info(this.markerYdh);
      }
    }, 1000 * 60 * 5); // 每1000毫秒执行一次
  },
  computed: {
    allLogisticsListCheck: {
      get() {
        return this.logisticsList.every((item) => item.isChecked);
      },
      set(checked) {
        if (checked) {
          // 所有选项都要被选中
          this.logisticsList.forEach((element) => {
            element.isChecked = true;
          });
        } else {
          this.logisticsList.forEach((item) => (item.isChecked = false));
        }
      },
    },
  },
  watch: {
    marks(n, o) {
      if (!this.markerYdh) {
        var view = this.map.getViewport(eval(n));
        this.zoom = view.zoom;
        this.center = view.center;
      }
    },
    polyline(n, o) {
      if (n) {
        var view = this.map.getViewport(eval([this.startPolyline, this.endPolyline]));
        this.zoom = view.zoom;
        this.center = view.center;
      }
    },
    warnList(n, o) {
      if (n.length > 0) {
        this.dialogVisibleWarm = true;
      }
    },
    dialogVisibleWarm(n, o) {
      if (this.dialogVisibleWarm == true) {
        console.log("start");
        this.$nextTick(function () {
          // this.warn_audio.play();
        });
      } else {
        console.log("end");
        this.$nextTick(function () {
          // this.warn_audio.close();
        });
      }
    },
    // markerYdh(n,o){
    //   if(n.transmode == 1){
    //     this.activeChart = "rb"
        
    //     document.getElementById(`tab-rt`).style.display = 'none';
    //     document.getElementById(`tab-rb`).style.display = 'block';
    //   }else{
    //     this.activeChart = "rt"
    //     document.getElementById(`tab-rt`).style.display = 'block';
    //     document.getElementById(`tab-rb`).style.display = 'block';
    //   }
    // }
  },
  methods: {
    getLayoutElementNumber(elementName) {
      return elementName + this.layout.length;
    },

    // 设置实际的宽度和高度
    containerResizedEvent: function (i, newH, newW, newHPx, newWPx) {
      this.layout.map((val) => {
        if (val.i === i) {
          this.$set(this.pxData, val.i, {
            hpx: Number(newHPx),
            wpx: Number(newWPx),
          });
        }
      });
    },

    mapHandler({ BMap, map }) {
      this.map = map;
      var sy = new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW, {
        scale: 0.5, // 图标缩放大小
        strokeColor: "#fff", // 设置矢量图标的线填充颜色
        strokeWeight: "3", // 设置线宽
      });
      var icons = new BMap.IconSequence(sy, "5%", "10%");
      this.icons.push(icons);
    },

    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      // 绘制图表
      const xAxisData = this.drawLineData.map((item) => item.temp_time);

      // 判断是否存在t  n
      var series = []
      var legendData = []

      const seriesDataT1 = this.drawLineData.map((item) => item.t1);
      const seriesDataT2 = this.drawLineData.map((item) => item.t2);
      const seriesDataT3 = this.drawLineData.map((item) => item.t3);

      var uniqueT1 = [...new Set(seriesDataT1)]
      var wdjlybh = this.markerYdh.wdjlybh ? this.markerYdh.wdjlybh.split("/") : []
      if(uniqueT1.length > 1){
        var legend_title = "T1"
        legendData.push(legend_title)
        
        series.push(
          {
            name: legend_title,
            type: "line",
            symbol: "none",
            data: seriesDataT1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
            markLine: {
              data: [
                {
                  yAxis: this.wdmax, // 横坐标的值，决定纵向辅助线在x轴的位置
                  label: {
                    formatter: "上限",
                  },
                },
                {
                  yAxis: this.wdmin, // 横坐标的值，决定纵向辅助线在x轴的位置
                  label: {
                    formatter: "下限",
                  },
                },
              ],
            },
          }
        )
      }

      var uniqueT2 = [...new Set(seriesDataT2)]
      if(uniqueT2.length > 1){
        var legend_title = "T2"
        legendData.push(legend_title)
        series.push(
          {
            name: legend_title,
            type: "line",
            symbol: "none",
            data: seriesDataT2,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            }
          }
        )
      }

      var uniqueT3 = [...new Set(seriesDataT3)]
      if(uniqueT3.length > 1){
        var legend_title = "T3"
        legendData.push(legend_title)
        series.push(
          {
            name: legend_title,
            type: "line",
            symbol: "none",
            data: seriesDataT3,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          }
        )
      }

      var ydh = this.markerYdh.ydh ? this.markerYdh.ydh : ""

      const option = {
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        title : {
          text: '运单号：' + ydh,
          textStyle: {
            color:"#fff",
            fontSize: 16,
            fontWeight: 'normal',
          },
          x: "left",
          textAlign: "left",
        },
        tooltip: {
          trigger: "axis",
          show: false,
        },
        legend: {
          data: legendData,
          textStyle: {
            //图例文字的样式
            color: "#fff", //图例文字颜色
            fontSize: 12, //图例文字大小
          },
        },
        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: xAxisData,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value} °C",
            },
            splitLine: {
              show: true,
            },
          },
        ],
        series: series,
      };

      this.temp_line.clear()
      this.temp_line.setOption(option);
    },

    drawLineB() {
      // 基于准备好的dom，初始化echarts实例
      // 绘制图表
      const xAxisData = this.drawLineDataB.map((item) => item.temp_time);

      // 判断是否存在t  n
      var series = []
      var legendData = []

      const seriesDataT11 = this.drawLineDataB.map((item) => item.t11);
      const seriesDataT12 = this.drawLineDataB.map((item) => item.t12);
      const seriesDataT13 = this.drawLineDataB.map((item) => item.t13);
      const seriesDataT14 = this.drawLineDataB.map((item) => item.t14);
      const seriesDataT15 = this.drawLineDataB.map((item) => item.t15);
      const seriesDataT16 = this.drawLineDataB.map((item) => item.t16);
      const seriesDataT17 = this.drawLineDataB.map((item) => item.t17);
      const seriesDataT18 = this.drawLineDataB.map((item) => item.t18);
      const seriesDataT19 = this.drawLineDataB.map((item) => item.t19);

      var wdjlybh = this.markerYdh.wdjlybh ? this.markerYdh.wdjlybh.split("/") : []

      var uniqueT11 = [...new Set(seriesDataT11)]
      if(uniqueT11.length > 1){
        var legend_title = "T11"
        if(wdjlybh.hasOwnProperty(0)){
          legend_title = "T11("+wdjlybh[0]+")"
        }
        legendData.push(legend_title)
        series.push(
          {
            name: legend_title,
            type: "line",
            symbol: "none",
            data: seriesDataT11,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
            markLine: {
              data: [
                {
                  yAxis: this.wdmax, // 横坐标的值，决定纵向辅助线在x轴的位置
                  label: {
                    formatter: "上限",
                  },
                },
                {
                  yAxis: this.wdmin, // 横坐标的值，决定纵向辅助线在x轴的位置
                  label: {
                    formatter: "下限",
                  },
                },
              ],
            },
          }
        )
      }

      var uniqueT12 = [...new Set(seriesDataT12)]
      if(uniqueT12.length > 1){
        var legend_title = "T12"
        if(wdjlybh.hasOwnProperty(1)){
          legend_title = "T12("+wdjlybh[1]+")"
        }
        legendData.push(legend_title)
        series.push(
          {
            name: legend_title,
            type: "line",
            symbol: "none",
            data: seriesDataT12,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            }
          }
        )
      }

      var uniqueT13 = [...new Set(seriesDataT13)]
      if(uniqueT13.length > 1){
        var legend_title = "T13"
        if(wdjlybh.hasOwnProperty(2)){
          legend_title = "T13("+wdjlybh[2]+")"
        }
        legendData.push(legend_title)
        series.push(
          {
            name: legend_title,
            type: "line",
            symbol: "none",
            data: seriesDataT13,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          }
        )
      }

      var uniqueT14 = [...new Set(seriesDataT14)]
      if(uniqueT14.length > 1){
        var legend_title = "T14"
        if(wdjlybh.hasOwnProperty(3)){
          legend_title = "T14("+wdjlybh[3]+")"
        }
        legendData.push(legend_title)
        series.push(
          {
            name: legend_title,
            type: "line",
            symbol: "none",
            data: seriesDataT14,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          }
        )
      }

      var uniqueT15 = [...new Set(seriesDataT15)]
      if(uniqueT15.length > 1){
        var legend_title = "T15"
        if(wdjlybh.hasOwnProperty(4)){
          legend_title = "T15("+wdjlybh[4]+")"
        }
        legendData.push(legend_title)
        series.push(
          {
            name: legend_title,
            type: "line",
            symbol: "none",
            data: seriesDataT15,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          }
        )
      }

      var uniqueT16 = [...new Set(seriesDataT16)]
      if(uniqueT16.length > 1){
        var legend_title = "T16"
        if(wdjlybh.hasOwnProperty(5)){
          legend_title = "T16("+wdjlybh[5]+")"
        }
        legendData.push(legend_title)
        series.push(
          {
            name: legend_title,
            type: "line",
            symbol: "none",
            data: seriesDataT16,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          }
        )
      }

      var uniqueT17 = [...new Set(seriesDataT17)]
      if(uniqueT17.length > 1){
        var legend_title = "T17"
        if(wdjlybh.hasOwnProperty(6)){
          legend_title = "T17("+wdjlybh[6]+")"
        }
        legendData.push(legend_title)
        series.push(
          {
            name: legend_title,
            type: "line",
            symbol: "none",
            data: seriesDataT17,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          }
        )
      }

      var uniqueT18 = [...new Set(seriesDataT18)]
      if(uniqueT18.length > 1){
        var legend_title = "T18"
        if(wdjlybh.hasOwnProperty(7)){
          legend_title = "T18("+wdjlybh[7]+")"
        }
        legendData.push(legend_title)
        series.push(
          {
            name: legend_title,
            type: "line",
            symbol: "none",
            data: seriesDataT18,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          }
        )
      }

      var uniqueT19 = [...new Set(seriesDataT19)]
      if(uniqueT19.length > 1){
        var legend_title = "T19"
        if(wdjlybh.hasOwnProperty(8)){
          legend_title = "T19("+wdjlybh[8]+")"
        }
        legendData.push(legend_title)
        series.push(
          {
            name: legend_title,
            type: "line",
            symbol: "none",
            data: seriesDataT19,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          }
        )
      }

      var ydh = this.markerYdh.ydh ? this.markerYdh.ydh : ""

      const option = {
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        title : {
          text: '运单号：' + ydh,
          textStyle: {
            color:"#fff",
            fontSize: 16,
            fontWeight: 'normal',
          },
          x: "left",
          textAlign: "left",
        },
        tooltip: {
          trigger: "axis",
          show: false,
        },
        legend: {
          data: legendData,
          textStyle: {
            //图例文字的样式
            color: "#fff", //图例文字颜色
            fontSize: 12, //图例文字大小
          },
        },
        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: xAxisData,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value} °C",
            },
            splitLine: {
              show: true,
            },
          },
        ],
        series: series,
      };

      this.temp_line_b.clear()
      this.temp_line_b.setOption(option);
    },

    lookDetail(index) {
      this.bills_mark[index].showFlag =
        this.bills_mark[index].showFlag == true ? false : true;
      this.bills_mark = Object.assign({}, this.bills_mark);
    },
    infoWindowClose(index) {
      this.bills_mark[index].showFlag = false;
      this.bills_mark = Object.assign({}, this.bills_mark);
    },
    infoWindowOpen(index) {
      this.bills_mark[index].showFlag = true;
      this.bills_mark = Object.assign({}, this.bills_mark);
    },

    // 时间格式化
    formatDate(date) {
      var myyear = date.getFullYear();
      var mymonth = date.getMonth() + 1;
      var myweekday = date.getDate();
      var h = date.getHours();
      if (mymonth < 10) {
        mymonth = "0" + mymonth;
      }
      if (myweekday < 10) {
        myweekday = "0" + myweekday;
      }
      // h = h < 10 ? "0" + h : h;
      // var m = date.getMinutes();
      // m = m < 10 ? "0" + m : m;
      // var s = date.getSeconds();
      // s = s < 10 ? "0" + s : s;
      return myyear + "-" + mymonth + "-" + myweekday;
    },

    // getBillsList () {

    //   var url = '/api/getwaybillstatuslist/'
    //   request({ url: url }).then(ret => {
    //   var billsList = []
    //   for (const billsItem of ret.data) {
    //     billsItem["isChecked"] = false

    //     if(billsItem["sswdtxt"] == 'N/A/N/A/N/A'){
    //       billsItem["sswdtxt"] = '-'
    //     }

    //     if(billsItem["cuswbno"] == '/'){
    //       billsItem["cuswbno"] = '-'
    //     }

    //     billsList.push(billsItem)
    //   }

    //     this.logisticsList = billsList
    //   })
    // },
    search_before() {
      this.markerYdh = "";
      this.polyline = "";
      this.polyline_warn = "";
      this.drawLineData = [];
      this.drawLineDataB = [];
      this.markerYdhTab = false
      this.logisticsList = []
      this.drawLine();
      this.drawLineB();
      this.search_logistics();
    },

    search_logistics() {
      var url = "/api/getwaybillstatuslist/";
      request({
        url: url,
        params: {
          start_time: this.logisticsListDate[0],
          end_time: this.logisticsListDate[1],
          type: this.logisticsTypeValue,
        },
      }).then((ret) => {
        var billsList = [];
        var warnList = [];
        var bills_mark = [];
        var marks = [];
        var total_bills = 0;
        var tobe_bills = 0;
        var tobe_sign = 0;
        var done_sign = 0;
        var in_bills = 0;

                //按照 订单号 和 提货时间正序排序
        ret.data.sort((a,b) => {
          let ydh_a = Number(a.ydh)
          let ydh_b = Number(b.ydh)
          let thsj_a = a.thsj ? Date.parse(a.thsj) : 0
          let thsj_b = b.thsj ? Date.parse(b.thsj) : 0

          if(thsj_a === thsj_b){
            return ydh_a - ydh_b
          }else{
            return thsj_a - thsj_b
          }
        })


        for (const billsItem of ret.data) {
          billsItem["isChecked"] = false;


          
          var re = new RegExp('N/A', 'g');
          billsItem["sswdtxt"] = billsItem["sswdtxt"] ? billsItem["sswdtxt"].replace(re, '- ') : "";
          // if (billsItem["sswdtxt"] == "N/A/N/A/N/A") {
          //   billsItem["sswdtxt"] = "-";
          // }

          if (billsItem["cuswbno"] == "/") {
            billsItem["cuswbno"] = "-";
          }

          billsList.push(billsItem);

          total_bills++;

          if (billsItem["wlstatsimp"] == "已签收") {
            done_sign++;
          } else if (billsItem["wlstatsimp"] == "待签收") {
            tobe_sign++;
          } else if (billsItem["wlstatsimp"] == "待配送") {
            tobe_bills++;
          } else if (billsItem["wlstatsimp"] == "运输中") {
            in_bills++;
          }

          if (billsItem["isalert"] == "预警" && billsItem["wlstatsimp"] != "已签收") {
            warnList.push(billsItem);
          } else if (billsItem["isalert"] == "报警") {
            warnList.push(billsItem);
          }

          if (billsItem["wljwd"] && billsItem["wljwd"] != "N/A") {
            var wljwd = JSON.parse(billsItem["wljwd"]);
            bills_mark.push({
              ydh: billsItem["ydh"],
              wljwd: { lng: wljwd[0], lat: wljwd[1] },
              wlpos: billsItem["wlpos"],
              sswdtxt: billsItem["sswdtxt"],
              showFlag: false,
            });
            marks.push({ lng: wljwd[0], lat: wljwd[1] });
          }
        }

        // 预警排序,时间倒序
        warnList = warnList.sort(
          (a, b) => new Date(b.sswdsj).getTime() - new Date(a.sswdsj).getTime()
        );



        this.logisticsList = billsList;
        this.warnList = warnList;
        this.bills_mark = bills_mark;
        this.marks = marks;
        this.index_data.total_bills = total_bills;
        this.index_data.done_sign = done_sign;
        this.index_data.tobe_sign = tobe_sign;
        this.index_data.tobe_bills = tobe_bills;
        this.index_data.in_bills = in_bills;

        // this.polyline = []
        // this.polyline_warn = []
        // this.drawLineData = []
      });
    },

    downloadSubmit() {
      var ydh_list = [];
      for (const billsItem of this.logisticsList) {
        if (billsItem.isChecked == true) {
          ydh_list.push(billsItem["ydh"]);
        }
      }
      var download_checked = [];
      for (const checked of this.downloadChecked) {
        download_checked.push(Number(checked));
      }

      var that = this;
      var url = "/api/downloadFile/";
      request({
        url: url,
        params: {
          ydh_list: JSON.stringify(ydh_list),
          download_checked: JSON.stringify(download_checked),
        },
      }).then((ret) => {
        that.downloadDialogVisible = false;
        that.$message.info("任务正在处理中，请至下载中心下载文件！");
      });
    },

    click_info(info) {
      this.markerYdhTab = false
      let loadingInstance1 = Loading.service({
        fullscreen: true,
        background: "rgba(255, 255, 255, .5)",
      });

      var url = "/api/getwaybillstatusinfo/";
      var polyline_info = [];
      var polyline_points = [];
      // var polyline_warn_arr = [[{lng:103.98065,lat:30.558204},{lng:103.980416,lat:30.558622}]]

     

      this.wdmin = info.wdmin;
      this.wdmax = info.wdmax;

      // #标记运单号
      this.markerYdh = info;
      request({ url: url, params: { ydh: info.ydh } }).then((ret) => {
        var polyline_warn_arr = [];

        var drawLine_data = [];
        if(ret.data.rtdata){
          for (const infoItem of ret.data.rtdata.rows) {
            if(ret.data.transmode == 1){
              if (infoItem["lat"] && infoItem["lng"]) {
                polyline_info.push({
                  lng: parseFloat(infoItem["lng"]),
                  lat: infoItem["lat"],
                  t1: infoItem["t1"],
                });
              }
            }
            if (
              "t1" in infoItem || 
              "t2" in infoItem || 
              "t3" in infoItem || 
              "t4" in infoItem || 
              "t5" in infoItem || 
              "t6" in infoItem || 
              "t7" in infoItem || 
              "t8" in infoItem || 
              "t9" in infoItem ||
              "t11" in infoItem ||
              "t12" in infoItem ||
              "t13" in infoItem
              ) {
              drawLine_data.push({
                temp_time: infoItem["dt"],
                t1: "t1" in infoItem ? infoItem["t1"] : null,
                t2: "t2" in infoItem ? infoItem["t2"] : null,
                t3: "t3" in infoItem ? infoItem["t3"] : null,
                t4: "t4" in infoItem ? infoItem["t4"] : null,
                t5: "t5" in infoItem ? infoItem["t5"] : null,
                t6: "t6" in infoItem ? infoItem["t6"] : null,
                t7: "t7" in infoItem ? infoItem["t7"] : null,
                t8: "t8" in infoItem ? infoItem["t8"] : null,
                t9: "t9" in infoItem ? infoItem["t9"] : null,
                t11: "t11" in infoItem ? infoItem["t11"] : null,
                t12: "t12" in infoItem ? infoItem["t12"] : null,
                t13: "t13" in infoItem ? infoItem["t13"] : null
              });
            }


          }
        }

        var drawLine_data_b = [];
        if(ret.data.rbdata){
          for (const infoItem of ret.data.rbdata.rows) {
            if(ret.data.transmode == 2 || ret.data.transmode == 3){
              if (infoItem["lat"] && infoItem["lng"]) {
                polyline_info.push({
                  lng: parseFloat(infoItem["lng"]),
                  lat: infoItem["lat"],
                  t1: infoItem["t11"],
                });
              }
            }
            

            if (
              "t1" in infoItem || 
              "t2" in infoItem || 
              "t3" in infoItem || 
              "t4" in infoItem || 
              "t5" in infoItem || 
              "t6" in infoItem || 
              "t7" in infoItem || 
              "t8" in infoItem || 
              "t9" in infoItem ||
              "t11" in infoItem ||
              "t12" in infoItem ||
              "t13" in infoItem ||
              "t14" in infoItem ||
              "t15" in infoItem ||
              "t16" in infoItem ||
              "t17" in infoItem ||
              "t18" in infoItem ||
              "t19" in infoItem
              ) {
              drawLine_data_b.push({
                temp_time: infoItem["dt"],
                t1: "t1" in infoItem ? infoItem["t1"] : null,
                t2: "t2" in infoItem ? infoItem["t2"] : null,
                t3: "t3" in infoItem ? infoItem["t3"] : null,
                t4: "t4" in infoItem ? infoItem["t4"] : null,
                t5: "t5" in infoItem ? infoItem["t5"] : null,
                t6: "t6" in infoItem ? infoItem["t6"] : null,
                t7: "t7" in infoItem ? infoItem["t7"] : null,
                t8: "t8" in infoItem ? infoItem["t8"] : null,
                t9: "t9" in infoItem ? infoItem["t9"] : null,
                t11: "t11" in infoItem ? infoItem["t11"] : null,
                t12: "t12" in infoItem ? infoItem["t12"] : null,
                t13: "t13" in infoItem ? infoItem["t13"] : null,
                t14: "t14" in infoItem ? infoItem["t14"] : null,
                t15: "t15" in infoItem ? infoItem["t15"] : null,
                t16: "t16" in infoItem ? infoItem["t16"] : null,
                t17: "t17" in infoItem ? infoItem["t17"] : null,
                t18: "t18" in infoItem ? infoItem["t18"] : null,
                t19: "t19" in infoItem ? infoItem["t19"] : null
              });
            }
          }
        }

        //判断tab标签是否显示

        if(ret.data.transmode == 1){
          // this.activeChart = "rb"
          
          document.getElementById(`tab-rt`).style.display = 'none';
          document.getElementById(`tab-rb`).style.display = 'block';
        }else if(ret.data.transmode == 2){
          // this.activeChart = "rt"
          document.getElementById(`tab-rt`).style.display = 'block';
          document.getElementById(`tab-rb`).style.display = 'none';
        }else{
          this.activeChart = "common"
          document.getElementById(`tab-rt`).style.display = 'block';
          document.getElementById(`tab-rb`).style.display = 'block';
        }

        this.markerYdhTab = true

        // --------------------
        polyline_info = polyline_info.reverse();
        for (var i = 0; i < polyline_info.length; i++) {
          polyline_points.push({ lng: polyline_info[i].lng, lat: polyline_info[i].lat });

          if (
            (polyline_info[i].t1 < this.wdmin || polyline_info[i].t1 > this.wdmax) &&
            (i < polyline_info.length - 1)
          ) {
            polyline_warn_arr.push([
              { lng: polyline_info[i].lng, lat: polyline_info[i].lat },
              { lng: polyline_info[i + 1].lng, lat: polyline_info[i + 1].lat },
            ]);
          }
          
        }

        // google浏览器有bug，需这样处理下
        polyline_warn_arr = JSON.parse(JSON.stringify(polyline_warn_arr))
        
        


        if (polyline_points.length == 0) {
          this.$message.info("该运单轨迹尚未生成");
        }

        // 分割线数组
        var polyline_points_chunks = [];
        var chunks_size = 100;

        for (let i = 0; i < polyline_points.length; i += chunks_size) {
          polyline_points_chunks.push(polyline_points.slice(i, i + chunks_size));
        }

        // 拼接，首位相连
        for (var i = 0; i < polyline_points_chunks.length; i++) {
          if (i + 1 < polyline_points_chunks.length) {
            polyline_points_chunks[i].push(polyline_points_chunks[i + 1][0]);
          }
        }

        this.polyline = polyline_points_chunks;

        // var unique_polyline_warn_arr = []
        
        // var j = 0
        // for(var i = 0; i < polyline_warn_arr.length; i++){
        //   if(!unique_polyline_warn_arr.hasOwnProperty(j)){
        //     unique_polyline_warn_arr[j] = polyline_warn_arr[i]
        //     continue
        //   }

        //   if(i+1<polyline_warn_arr.length && JSON.stringify(polyline_warn_arr[i][1]) == JSON.stringify(polyline_warn_arr[i+1][0])){

        //     unique_polyline_warn_arr[j].push(polyline_warn_arr[i+1][1])
        //   }else if(i+1<polyline_warn_arr.length && JSON.stringify(polyline_warn_arr[i][1]) != JSON.stringify(polyline_warn_arr[i+1][0])){
        //     j++
        //   }
        // }
        // console.log(polyline_warn_arr,unique_polyline_warn_arr)
        this.polyline_warn = polyline_warn_arr;

        this.startPolyline = polyline_points[0];
        this.endPolyline = polyline_points[polyline_points.length - 1];

        // -------------------

        this.drawLineData = drawLine_data;
        this.drawLineDataB = drawLine_data_b;

        this.drawLine();
        this.drawLineB();

        // 获取运单基础信息
        this.get_bill_info(this.markerYdh)
        loadingInstance1.close();
      }).catch(err => {
        loadingInstance1.close();
    });
    },

    get_bill_info(info){
      this.signPhotoList = []
      this.signPhoto = ""
      this.billInfo = {
        slwbr_cuswbno:"",
        slwbr_ydh:"",
        slwbr_fhdw:"",
        slwbr_shdw:"",
        slwbr_dhdz:"",
        slwbr_shr:"",
        slwbr_shrdh:"",
        slwbr_wdyq:"",
        slwbr_thsj:"",
        slwbr_qssj:""
      }

      this.billCurData = {
        sswdsj:"",
        sswdtxt:"",
        wlpos:"",
        route_info:[]
      }

      this.carryinGoodsList = []

      var url = "/api/getbillcommoninfo/";
      request({ url: url, params: { ydh: info.ydh } }).then((ret) => {

        // 运单信息
        this.billInfo.slwbr_cuswbno = (ret.data.slwbr_cuswbno && ret.data.slwbr_cuswbno != "/") ? ret.data.slwbr_cuswbno : "-"
        this.billInfo.slwbr_ydh = ret.data.slwbr_ydh ? ret.data.slwbr_ydh : "-"
        this.billInfo.slwbr_fhdw = ret.data.slwbr_fhdw ? ret.data.slwbr_fhdw : "-"
        this.billInfo.slwbr_shdw = ret.data.slwbr_shdw ? ret.data.slwbr_shdw : "-"
        this.billInfo.slwbr_dhdz = ret.data.slwbr_dhdz ? ret.data.slwbr_dhdz : "-"
        this.billInfo.slwbr_shr = ret.data.slwbr_shr ? ret.data.slwbr_shr : "-"
        this.billInfo.slwbr_shrdh = ret.data.slwbr_shrdh ? ret.data.slwbr_shrdh : "-"
        this.billInfo.slwbr_wdyq = ret.data.slwbr_wdyq ? ret.data.slwbr_wdyq : "-"
        this.billInfo.slwbr_thsj = ret.data.slwbr_thsj ? ret.data.slwbr_thsj : "-"
        this.billInfo.slwbr_qssj = ret.data.slwbr_qssj ? ret.data.slwbr_qssj : "-"

        // 货物信息
        if(ret.data.slwbr_gt1name){
          this.carryinGoodsList.push({name:ret.data.slwbr_gt1name,num:ret.data.slwbr_zjs1})
        }
        if(ret.data.slwbr_gt2name){
          this.carryinGoodsList.push({name:ret.data.slwbr_gt2name,num:ret.data.slwbr_zjs2})
        }
        if(ret.data.slwbr_gt3name){
          this.carryinGoodsList.push({name:ret.data.slwbr_gt3name,num:ret.data.slwbr_zjs3})
        }
        if(ret.data.slwbr_gt4name){
          this.carryinGoodsList.push({name:ret.data.slwbr_gt4name,num:ret.data.slwbr_zjs4})
        }
        if(ret.data.slwbr_gt5name){
          this.carryinGoodsList.push({name:ret.data.slwbr_gt5name,num:ret.data.slwbr_zjs5})
        }

        // 签收照片
        if(ret.data.fileList.length > 0){
          this.signPhotoList = ret.data.fileList
          this.signPhoto = this.signPhotoList[0]
        }

        // 实时数据
        this.billCurData.sswdsj = ret.data.sswdsj ? ret.data.sswdsj : "-"
        this.billCurData.sswdtxt = ret.data.sswdtxt ? ret.data.sswdtxt : "-"
        this.billCurData.wlpos = ret.data.sswdsj ? ret.data.wlpos : "-"

        var _route_info = []
        // 历史路由
        if(ret.data.ydlsinfo){
          var ydlsinfo_arr = ret.data.ydlsinfo ? ret.data.ydlsinfo.split("####") : []
          for (var i = 0; i < ydlsinfo_arr.length; i++) {
            var _route_info_item = {
              title: "",
              color: "#e4e7ed",
              desc: ""
            }

            var point_time = ydlsinfo_arr[i].slice(0,16)
            var status_info = ""
            _route_info_item.desc = ydlsinfo_arr[i].slice(16)
            if(i == 0){
              // status_info = "已揽件"
              status_info = ""
              _route_info_item.title = point_time
              _route_info_item.desc = status_info + "    " + _route_info_item.desc
              _route_info.push(_route_info_item)
            }else if(i + 1 == ydlsinfo_arr.length){
              if(ydlsinfo_arr[i].includes("已签收")){
                // status_info = "已签收"
                 status_info = ""
                 _route_info_item.title = point_time
                 _route_info_item.desc = status_info + "    " + _route_info_item.desc
                 _route_info_item.color = "#409eff"
                _route_info.push(_route_info_item)
              }else{
                // status_info = "运输中"
                 status_info = ""
                 _route_info_item.title = point_time
                 _route_info_item.desc = status_info + "    " + _route_info_item.desc
                 _route_info_item.color = "#409eff"
                _route_info.push(_route_info_item)

                // 未来路由
                var ydlsinfo_wl_arr = ret.data.ydwlinfo ? ret.data.ydwlinfo.split("####") : []
                for (var j = 0; j < ydlsinfo_wl_arr.length; j++) {
                  var wl_point_time = ydlsinfo_wl_arr[j].slice(0,16)
                  var wl_status_info = ""
                  var desc = ydlsinfo_wl_arr[j].slice(16)

                  if(j + 1 == ydlsinfo_wl_arr.length){
                    if(ydlsinfo_wl_arr[j].includes("已签收")){
                       _route_info.push({title: wl_point_time,color:"#409eff",desc:desc})
                    }else{
                       _route_info.push({title: wl_point_time,color:"#409eff",desc:desc})
                    }
                  }else{
                    _route_info.push({title: wl_point_time,color:"#409eff",desc:desc})
                  }
                }

               
              }
            }else{
              // status_info = "运输中"
               status_info = ""
              _route_info_item.title = point_time
              _route_info_item.desc = status_info + "    " + _route_info_item.desc
              _route_info.push(_route_info_item)
            }
          }

        }
        this.billCurData.route_info = _route_info.reverse()
      })
    },
    changeRightShow() {
      this.right_show = !this.right_show;

      if (this.right_show == true) {
        this.baidu_map_width = "48";
        this.baidu_map_width_delay = "0s";
        this.baidu_map_width_transition = "0s";
      } else {
        this.baidu_map_width = "74";
        this.baidu_map_width_delay = ".5s";
        this.baidu_map_width_transition = ".5s";
      }
    }
  },
  beforeDestroy() {
    // 清除定时任务
    clearInterval(this.intervalId);
  },
};
</script>

<style lang="scss">
@font-face {
  font-family: electronicFont;
  src: url("~@/assets/fonts/DS-DIGIT.TTF");
}

img {
  max-width: none !important;
}

.el-dialog__header {
  background: #333366;
}
.warm_style .el-dialog__header {
  background: red;
}
.warm_style .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.el-dialog__title {
  color: #fff;
}

.el-dialog__body {
  border-bottom: 1px solid #333366;
}
.dialog-footer .el-button--success {
  background-color: #333399;
  border-color: #333399;
}

.dialog-footer .el-button--success:hover {
  background-color: #333366;
  border-color: #333366;
}

.wl .el-range-editor .el-range-input {
  background: transparent;
  font-size: 12px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.8);
}

.wl .el-date-editor .el-range__icon {
  line-height: 24px !important;
}

.wl .el-date-editor .el-range-separator {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  line-height: 24px;
  width: 20px;
}

.wl .el-popper[x-placement^="bottom"] {
  background: rgb(5, 18, 81);
  color: rgba(255, 255, 255, 0.8);
}

.el-date-table th {
  color: rgba(255, 255, 255, 0.8);
}

.d2-theme-container {
  background: url("~@/assets/image/dvadmin-i.png") repeat;
}
.wl .el-input__inner {
  height: 24px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.8);
  background: transparent;
  border: 0;
  padding: 0 8px;
}

.wl .el-input__icon {
  font-size: 12px;
  line-height: 24px;
  width: 20px;
}

.wl .el-input--default {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}

.wl .el-select .el-input .el-select__caret {
  height: 24px;
  line-height: 24px;
}

.wl .el-select-dropdown__item.selected {
  background: #333366;
  color: rgba(255, 255, 255, 0.8);
}

.wl .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: #333366;
  color:#fff
}

.wl .el-select-dropdown__item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.wl .el-input--suffix .el-input__inner {
  padding-right: 20px;
}

.wl .el-date-table td.in-range div,
.el-date-table td.in-range div:hover,
.el-date-table.is-week-mode .el-date-table__row.current div,
.el-date-table.is-week-mode .el-date-table__row:hover div {
  background: #333366;
  color: rgba(255, 255, 255, 0.8);
}

.wl .el-date-editor .el-range__close-icon {
  width: 1px;
}

.clearfix {
  background: url("~@/assets/image/gz.png") repeat;
}

.clearfix:after,
.clearfix:before {
  display: table;
  content: " ";
}

.clearfix:after {
  clear: both;
}

.clearfix:after,
.clearfix:before {
  display: table;
  content: " ";
}

.yqlist li {
  float: left;
  width: 25%;
  padding: 10px 0;
  text-align: center;
}

.yq {
  width: 100px;
  height: 100px;
  margin: 0 auto 5px auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-family: electronicFont;
}

.yq:before {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  background: url("~@/assets/image/img1.png") center center;
  border-radius: 100px;
  background-size: 100% 100%;
  opacity: 0.5;
  left: 0;
  top: 0;
  animation: myfirst2 15s infinite linear;
}

.yq:after {
  position: absolute;
  width: 86%;
  background: url("~@/assets/image/img2.png") center center;
  border-radius: 100px;
  background-size: 100% 100%;
  opacity: 0.3;
  height: 86%;
  content: "";
  left: 7%;
  top: 7%;
  animation: myfirst 15s infinite linear;
}

li {
  list-style-type: none;
}

.yqlist li span {
  font-size: 14px;
}

.total_num {
  width: 100%;
  height: 50px;
  background: url("~@/assets/image/gz.png") repeat;
}

.total_num p {
  font-size: 36px;
  font-family: electronicFont;
  color: #70db93;
  height: 50px;
  line-height: 50px;
  display: block;
  float: left;
}

.total_num span {
  font-size: 20px;
  padding-left: 10px;
  height: 50px;
  line-height: 50px;
  color: #70db93;
  display: block;
  float: left;
}

.el-tabs__item {
  color: #fff
}

@keyframes myfirst {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes myfirst2 {
  to {
    transform: rotate(360deg);
  }
}

.el-timeline-item__content{
  color:#efefef
}
.el-timeline-item__timestamp {
  color: #fff
}
</style>

<style scoped lang="scss">
::v-deep .d2-container-full__body {
  padding: 0 !important;
}

input {
  -webkit-appearance: auto !important;
}

input[type="checkbox" i] {
  margin: 0 !important;
}

*::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  opacity: 0.5;
  background-color: transparent;
  color: transparent;
}

.b-box-26 {
  width: 26%;
  padding: 0 20px;
  float: left;
}
.tit {
  display: flex;
  align-items: flex-end;
}

.tit span {
  background: url("~@/assets/image/line1.png") no-repeat bottom right;
  font-size: 20px;
  white-space: nowrap;
  padding-bottom: 10px;
  padding-right: 20px;
  color: #fff;
}

.tit p {
  background: url("~@/assets/image/line2.png") no-repeat bottom right;
  width: 100%;
  height: 13px;
  margin-bottom: 5px;
  opacity: 0.5;
}

.boxnav {
  height: 100%;
  padding: 10px 5px;
  display: block;
  height: 664px;
}

.table-row {
  overflow: hidden;
  overflow-y: scroll;
  width: 100%;
}

.boxnav .search {
  width: 100%;
  float: left;
}

.boxnav .search-date {
  width: 52%;
  float: left;
}

.boxnav .search-type {
  width: 20%;
  float: left;
}

.el-date-editor--daterange.el-input__inner {
  width: auto;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0px;
  padding: 3px 5px;
}

.el-date-editor .el-range__close-icon {
  width: 10px;
}

.logistics-list-table {
  width: 100%;
}

.logistics-list-table-header {
  width: 100%;
}

.logistics-list-table-body {
  width: 100%;
  float: left;
  border-bottom: 1px dotted #407abd;
}

.logistics-list-table-th {
  border-bottom: 1px solid #407abd;
  font-size: 12px;
  padding: 10px 0;
  color: rgba(255, 255, 255, 0.8);
  float: left;
  text-align: center;
  line-height: 35px;
  font-weight: bold;
}

.logistics-list-table-td {
  font-size: 14px;
  padding: 10px 0px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  align-items: center;
  float: left;
  word-break: break-all;
  font-size: 12px;
}

.search-btn {
  width: 14%;
  float: left;
}

.el-button--primary {
  padding: 8px 5px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  border: 0;
  font-size: 12px;
}

.el-button--primary:focus,
.el-button--primary:hover {
  background: #333366;
  color: rgba(255, 255, 255, 0.8);
}

.search-down {
  width: 14%;
  float: left;
}

.b-box {
  padding: 0 20px;
  float: left;
}

.bm-view {
  height: 700px;
}

.boxnav-min {
    padding: 10px 0;
}

.jcjg {
    height: 100%;
    margin-left: -10px;
    margin-right: -10px;
    color:#fff
}

.jcjg>li {
    width: 25%;
    height: 100%;
    float: left;
    height: 100%;
    padding: 0 10px;
}

.jcjg h3 {
    background: url("~@/assets/image/tit1.png") no-repeat;
    background-position: 30% 50%;
    margin-bottom: 15px;
    font-weight: normal;
    font-size: 15px;
}
</style>
